<template>
  <div class="sidebar">
    <div class="sidebar-top">
      <div style="display: flex">
        <div
          class="top-time"
          :class="{
            'top-month-dark': props.mapIndex === 1,
            'top-active': props.mapIndex === 2 && timeType === 'month',
            'top-dark-active': props.mapIndex === 1 && timeType === 'month',
          }"
          @click="clickMonth"
        >
          本月
        </div>
        <div
          class="top-time"
          :class="{
            'top-month-dark': props.mapIndex === 1,
            'top-active': props.mapIndex === 2 && timeType === 'season',
            'top-dark-active': props.mapIndex === 1 && timeType === 'season',
          }"
          @click="clickSeason"
        >
          本季度
        </div>
        <div class="picker-date" :class="props.mapIndex === 1 ? 'picker-date-dark' : ''">
          <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="changeDate"
          />
        </div>
      </div>
      <div
        class="top-task-type"
        :class="{
          'top-task-dark': props.mapIndex === 1,
        }"
      >
        <el-select
          popper-class="task-type-down"
          v-model="taskType"
          placeholder="请选择"
          size="large"
          clearable
          @change="changeTaskType"
        >
          <el-option v-for="item in taskOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
    </div>
    <div class="sidebar-num" :class="props.mapIndex === 1 ? 'sidebar-num-dark' : ''">
      <div class="sidebar-num-bg"></div>
      <p class="sidebar-num-amount">{{ getHistoryFlightNum }}</p>
      <p class="sidebar-num-tiele">历史飞行</p>
    </div>
    <div
      class="sidebar-list-title"
      :style="props.mapIndex === 1 ? 'background: linear-gradient(90deg, #02307F 0%, #1D3B8A 100%);' : ''"
    >
      <div style="flex: 1">平台账号</div>
      <div style="flex: 1">飞行员账号</div>
      <div style="flex: 1">平台用户名</div>
      <div style="flex: 1">任务类型</div>
      <div style="flex: 1">设备序列号</div>
      <div style="flex: 1">飞行时间</div>
    </div>
    <div class="sidebar-list-con">
      <div
        class="sidebar-list-item"
        v-for="(item, index) in flightData"
        :key="index"
        :style="
          props.mapIndex === 1 ? 'background: linear-gradient(90deg, #5C76A3 0%, rgba(81,107,174,0.7000) 100%);' : ''
        "
      >
        <div style="flex: 1" class="sidebar-list-item-serial" :style="props.mapIndex === 1 ? 'color: #FFFFFF;' : ''">
          {{ item.contact_mobile }}
        </div>
        <div style="flex: 1" class="sidebar-list-item-serial" :style="props.mapIndex === 1 ? 'color: #FFFFFF;' : ''">
          {{ item.feima_mobile }}
        </div>
        <div style="flex: 1" class="sidebar-list-item-serial" :style="props.mapIndex === 1 ? 'color: #FFFFFF;' : ''">
          {{ item.contact_user }}
        </div>
        <div style="flex: 1" class="sidebar-list-item-serial" :style="props.mapIndex === 1 ? 'color: #FFFFFF;' : ''">
          {{ item.project_type }}
        </div>
        <div
          class="sidebar-list-item-serial"
          style="flex: 1"
          :style="props.mapIndex === 1 ? 'color: #00FF9C;' : 'color: #0a9c64'"
          :title="item.serial_no"
        >
          {{ item.serial_no }}
        </div>
        <div style="flex: 1" :style="props.mapIndex === 1 ? 'color: #FFFFFF;' : ''">{{ item.created_at }}</div>
      </div>
    </div>
    <div class="sidebar-more" @click="jumpFlightData" :style="props.mapIndex === 1 ? 'color: #00FF9C;' : ''">
      <img v-if="props.mapIndex === 1" src="@/assets/img/home/icon_more.png" alt="" />
      <img v-else src="@/assets/img/home/icon_more_light.png" alt="" />
      更多详情
    </div>
  </div>
</template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue';
import {useRouter} from 'vue-router';
import {taskOptions} from '../address.ts';
import datetransform from '@/utils/index.ts';
import censusApi from '@/api/census.ts';

const date = ref([]);
const dateForm = ref({
  created_at_from: '',
  created_at_to: '',
});
const flightData = ref([]);
const getHistoryFlightNum = ref<number>();
const timeType = ref('month');
const taskType = ref('');

const props = defineProps({
  mapIndex: Number,
});

const router = useRouter();

const emit = defineEmits(['clickMonth', 'clickSeason', 'changeDate', 'changeTaskType']);

// 跳转飞行数据详情
const jumpFlightData = () => {
  router.push({name: 'flightDataDetail'});
};

// 月份
const clickMonth = async () => {
  timeType.value = 'month';
  const res = await censusApi.getFlightData({time: 'month ', page: 1});
  getHistoryFlightNum.value = res.data.total;
  emit('clickMonth');
};

// 季度
const clickSeason = async () => {
  timeType.value = 'season';
  const res = await censusApi.getFlightData({time: 'season ', page: 1});
  getHistoryFlightNum.value = res.data.total;
  emit('clickSeason');
};

// 选择任务类型
const changeTaskType = () => {
  getFlightData({project_type: taskType.value, page: 1});
  emit('changeTaskType', taskType.value);
};

// 选择时间
const changeDate = () => {
  date.value = [datetransform.formYYMMDD(date.value[0]), datetransform.formYYMMDD(date.value[1])];
  [dateForm.value.created_at_from, dateForm.value.created_at_to] = date.value;
  getFlightData(dateForm.value);
  emit('changeDate', dateForm.value);
};

// 获取飞行数据
const getFlightData = async (params) => {
  const res = await censusApi.getFlightData({...params, page: 1});
  if (res.status === 0) {
    flightData.value = res.data.data.map((item) => {
      item.created_at = formatDate(item.created_at);
      return item;
    });
    getHistoryFlightNum.value = res.data.total;
  }
};
// 初始化时间搜索条件
const paramsHistory = {
  created_at_from: datetransform.formYYMMDD(new Date(new Date().setDate(1))),
  created_at_to: datetransform.formYYMMDD(new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)),
};

// 时间转换
const formatDate = (time) => {
  // eslint-disable-next-line no-shadow
  const date = new Date(time);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const theDay = `${year.toString()}.${month.toString()}.${day.toString()}`;
  return theDay;
};

onMounted(() => {
  date.value = [paramsHistory.created_at_from, paramsHistory.created_at_to];
  getFlightData(paramsHistory);
});
</script>
<style lang="scss" scoped>
.sidebar {
  padding: 50px 30px;
  box-sizing: border-box;
  p {
    margin: 0;
  }
  .sidebar-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .top-time {
    width: 60px;
    background: #e2e6f1;
    border: 1px solid #3276da;
    margin-right: 12px;
    text-align: center;
    line-height: 26px;
    font-size: 12px;
    color: #3276da;
    cursor: pointer;
  }
  .top-month-dark {
    background: url(@/assets/img/home/quarter_bg.png) no-repeat;
    background-size: 100% 100%;
    border: 0;
    text-shadow: 0px 2px 5px rgba(100, 225, 255, 0.7);
    color: #4388e5;
  }
  .top-time-dark {
    background: url(@/assets/img/home/quarter_bg.png) no-repeat;
    background-size: 100% 100%;
    border: 0;
    color: #4388e5;
  }
  .top-dark-active {
    background: url(@/assets/img/home/month_bg.png) no-repeat;
    color: #2cd6ff;
  }
  .top-active {
    color: #fff;
    background: #3275da;
  }
  .picker-date {
    width: 200px;
    background: #3275da;
  }
  .picker-date-dark {
    width: 200px;
    background: rgba(20, 65, 166, 0.2);
    border: 1px solid #094a8c;
  }
  .top-task-type {
    border: 1px solid #3276da;
    &:deep(.el-select .el-input__wrapper) {
      background: #e2e6f1;
      border-radius: 0;
    }
    &:deep(.el-select .el-input__inner) {
      width: 95px;
      height: 24px;
      border: 0;
      color: #4388e5;
      &::placeholder {
        color: #4388e5;
      }
    }
    &:deep(.el-select .el-input .el-select__caret) {
      color: #4388e5;
    }
    &:deep(.el-input__wrapper) {
      box-shadow: 0 0 0 0 !important;
    }
    &:deep(.el-input__wrapper:hover) {
      box-shadow: 0 0 0 0 !important;
    }
    &:deep(.el-select .el-input.is-focus .el-input__wrapper) {
      box-shadow: 0 0 0 0 !important;
    }
    &:deep(.el-select .el-input__wrapper.is-focus) {
      box-shadow: 0 0 0 0 !important;
    }
  }
  .top-task-dark {
    border: 1px solid #094a8c;
    &:deep(.el-select .el-input__wrapper) {
      background: rgba(20, 65, 166, 0.2);
      border-color: rgba(20, 65, 166, 0.2) !important;
    }
  }
  .sidebar-num {
    height: 264px;
    margin-top: 27px;
    border: 1px solid #136070;
    background: rgba(0, 25, 67, 0.85);
    position: relative;
    &-bg {
      position: absolute;
      width: 308px;
      height: 183px;
      top: 55%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      background: url(@/assets/img/home/msg_bg.png) no-repeat;
      background-size: 100%;
    }
    &-amount {
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 80px;
      font-family: D-DINExp-Bold, D-DINExp;
      font-weight: bold;
      color: #ffffff;
      line-height: 87px;
      text-shadow: 0px 2px 22px #4274ff;
    }
    &-tiele {
      position: absolute;
      top: 105px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #4388e5;
      line-height: 20px;
    }
  }
  .sidebar-num-dark {
    background: rgba(0, 25, 67, 0.2);
    background-image: url(@/assets/img/home/flight_num_bg.png);
    background-size: 100% 100%;
    border: 0;
  }
  .sidebar-list-title {
    display: flex;
    height: 35px;
    background: #1e60c4;
    opacity: 0.8;
    color: #fff;
    margin: 36px 0 10px;
    line-height: 35px;
    padding-left: 25px;
  }
  .sidebar-list-con {
    height: 455px;
    overflow: hidden;
  }
  .sidebar-list-item {
    display: flex;
    height: 35px;
    height: 35px;
    background: #e2e6f1;
    opacity: 0.8;
    margin-bottom: 17px;
    line-height: 35px;
    padding-left: 25px;
    color: #333;
    &-serial {
      width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .sidebar-more {
    font-size: 13px;
    font-weight: bold;
    color: #1ed08c;
    text-align: right;
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    > img {
      margin-right: 8px;
    }
  }
  &:deep(.el-date-editor.el-input__inner) {
    border-radius: none;
    box-shadow: none;
  }
  &:deep(.el-input__icon) {
    display: none;
  }
  &:deep(.el-date-editor .el-range-input) {
    height: 24px;
  }
}
@media only screen and (max-width: 1366px) and (min-width: 768px) {
  .sidebar {
    .sidebar-list-con {
      height: 255px;
    }
  }
}
</style>
<style lang="scss">
.el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
  width: 220px;
}
.picker-date {
  .el-date-editor .el-range-input {
    color: #fff;
    &::placeholder {
      color: #fff;
    }
    &::-webkit-input-placeholder {
      /* WebKit browsers 适配谷歌 */
      color: #fff;
    }
    &:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 适配火狐 */
      color: #fff;
    }
  }
  .el-date-editor .el-range-separator {
    flex: 0;
    color: #fff;
  }
}

.picker-date-dark {
  .el-date-editor .el-range-input {
    color: #4388e5;
    &::placeholder {
      color: #4388e5;
    }
    &::-webkit-input-placeholder {
      /* WebKit browsers 适配谷歌 */

      color: #4388e5;
    }
    &:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 适配火狐 */

      color: #4388e5;
    }
  }
  .el-date-editor .el-range-separator {
    color: #4388e5;
  }
}
.task-type-down {
  position: absolute;
  width: 116px;
  background: #adb8cc;
  border: 1px solid #69789e;
  border-radius: 0;
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background: rgba(94, 107, 129, 0.5);
    color: #606266;
  }
  .el-select-dropdown__item.selected {
    color: #000;
  }
}
</style>
